<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>JS运行时测试页面</title>
</head>

<body>
    <label>选择逻辑文件</label>
    <input id="input_script" type="file" accept=".xe" /><br />
    <label>选择场景文件</label>
    <input id="input_scene" type="file" accept=".phs" /><br />
    <input id="input_start_fsm" type="text" value="test.Main" />
    <script type="text/javascript">
        function changeFSM(b) {
            let fsmNameInput = document.getElementById("input_start_fsm");
            fsmNameInput.value = b.value;
        }
    </script>
    <input type="button" onclick="changeFSM({value:''})" value="X" />
    <input type="button" onclick="changeFSM(this)" value="新建库.游戏逻辑" />
    <input type="button" onclick="changeFSM(this)" value="test.Main" />
    <br />
    <button id="button_saveScene">Save</button>
    <button id="button_run">Run</button>
    <script src="3rd/phaser.min.js"></script>
    <script src="3rd/fileOD.js"></script>
    <script src="../runtime/script.js"></script>
    <script src="../runtime/vm.js"></script>
    <script type="text/javascript">
        var scriptArrayBuffer;
        var phaserSceneJSONStr;
        let loadedScript;
        let vm;
        const inputElement = document.getElementById("input_script");
        inputElement.addEventListener("change", () => {
            const fileList = inputElement.files;
            if (fileList.length == 0) {
                return;
            }
            let reader = new FileReader();
            reader.onload = (evt) => {
                scriptArrayBuffer = reader.result;
                loadedScript = OBScriptLoader.loadScript(scriptArrayBuffer);
            };
            reader.readAsArrayBuffer(fileList[0]);
        }, false);

        const PhsInputElement = document.getElementById("input_scene");
        PhsInputElement.addEventListener("change", () => {
            const fileList = PhsInputElement.files;
            let reader = new FileReader();
            reader.onload = (evt) => {
                phaserSceneJSONStr = reader.result;
            };
            reader.readAsBinaryString(fileList[0]);
        });

        const runButton = document.getElementById('button_run')
        runButton.onclick = function () {
            if (vm) {
                vm = null;
            }
            if (loadedScript) {
                vm = new OBVM(loadedScript);
                // vm.Output = alert.bind(window);
                let fsmname = document.getElementById("input_start_fsm").value;
                let fsm = vm.CreateFSM(fsmname);
                if (!fsm) {
                    throw Error("No FSM named " + fsmname);
                }
            }
        };
        function step() {
            window.requestAnimationFrame(step);
            if (vm) {
                vm.update();
            }
        }
        window.requestAnimationFrame(step);
        const saveSceneButton = document.getElementById('button_saveScene')
        saveSceneButton.onclick = function () {
            // TODO
        };

        //

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create
            }
        };

        var game = new Phaser.Game(config);

        function preload() {
            this.load.setBaseURL('http://labs.phaser.io');

            this.load.image('sky', 'assets/skies/space3.png');
            this.load.image('logo', 'assets/sprites/phaser3-logo.png');
            this.load.image('red', 'assets/particles/red.png');
        }

        function create() {
            this.add.image(400, 300, 'sky');

            var particles = this.add.particles('red');

            var emitter = particles.createEmitter({
                speed: 100,
                scale: { start: 1, end: 0 },
                blendMode: 'ADD'
            });

            var logo = this.physics.add.image(400, 100, 'logo');

            logo.setVelocity(100, 200);
            logo.setBounce(1, 1);
            logo.setCollideWorldBounds(true);

            emitter.startFollow(logo);
        }
    </script>
    <!-- <script src="../runtime/index.js"></script> -->
</body>

</html>